<template>
	<view class="topic-detail-page">
		<!-- 自定义导航栏 -->
		<qmy-custom-navbar :bacColor="navbarBacColor" zIndex="99" :title="navbarBacColor == '0' ? '' : topicInfo.name"></qmy-custom-navbar>

		<!-- 加载中蒙版 -->
		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>

		<!-- 顶部话题详情区域 -->
		<view class="topic-header" :style="{
			'background-image': 'url(' + (topicInfo.cover_image || '') + ')',
			'height': calculateHeaderHeight + 'px'
		}">
			<view class="topic-header-overlay"></view>
			<view class="topic-header-content">
				<view class="topic-info">
					<image class="topic-avatar" :src="topicInfo.icon" mode="aspectFill"></image>
					<view class="topic-info-details">
						<view class="topic-name">{{topicInfo.name}}</view>
						<view class="topic-stats">
							<text>{{topicInfo.post_count || 0}} 内容</text>
							<text class="ml-20">{{topicInfo.follow_count || 0}} 关注</text>
						</view>
					</view>
					<view class="topic-action">
						<button class="topic-follow-btn" :class="{'topic-followed-btn': isFollowed}"
							@click="followTopic">
							{{isFollowed ? '已关注' : '+ 关注'}}
						</button>
					</view>
				</view>
				<!-- 话题介绍展开收起 -->
				<view class="topic-description-container">
					<view class="topic-description" :class="{'topic-description-expanded': isDescriptionExpanded}">
						{{topicInfo.description}}
					</view>
					<view class="topic-description-toggle"
						v-if="topicInfo.description && topicInfo.description.length > 60" @click="toggleDescription">
						<text>{{ isDescriptionExpanded ? '收起' : '展开' }}</text>
					</view>
				</view>
				<!-- 话题规则展开收起 -->
				<view class="topic-rules" v-if="topicInfo.rules">
					<view class="topic-rules-header" @click="toggleRules">
						<view class="topic-rules-title">
							<view class="title-indicator"></view>
							<text>话题规则</text>
						</view>
						<view class="toggle-icon" :class="{'toggle-icon-expanded': isRulesExpanded}">
							<view class="iconfont" :class="isRulesExpanded ? 'ic-xia icon-rotate' : 'ic-shang'">
							</view>
						</view>
					</view>
					<view class="topic-rules-content-wrapper" :class="{'content-expanded': isRulesExpanded}">
						<scroll-view scroll-y class="topic-rules-content" ref="rulesContent">
							<view class="topic-rules-text">{{topicInfo.rules}}</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>

		<!-- 圈子内容列表 -->
		<view class="topic-content" :style="{'margin-top': -30 + 'rpx'}">
			<!-- 如果圈子列表为空 -->
			<view v-if="circleList.length === 0" class="empty-state">
				<image class="empty-image"
					src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/circle-empty.png"
					mode="aspectFit"></image>
				<view class="empty-text">该话题下暂无内容</view>
			</view>
			<view v-else>
				<view v-for="(item,index) in circleList" :key="index"
					class="bac-col-f br-20 mt-10 pos-rela mb-30 animate__fadeIn dh-0-4s" style="z-index: 1;">
					<view class="ping-30">
						<view class="flex-dir-row flex-x-bet ali-item-cen">
							<view class="flex-dir-row ali-item-cen">
								<view @click="$NavigateTo(`/qmy_user/user/myPage?usid=${item.user_id}`)">
									<qmy-gender-border :gender="item.user_gender"
										:avatar="item.user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
										:avatarWidth="75 + 'rpx'" :avatarHeight="75 + 'rpx'"></qmy-gender-border>
								</view>
								<view class="ml-20">
									<view class="fs-26 fw-600 flex-dir-row ali-item-cen">
										<view class="text-element-1">{{item.user_name || '匿名用户'}}</view>
										<view v-if="item.is_essence" class="fs-20 highlighted">精选</view>
									</view>
									<view class="fs-24 col-b1 mt-5">
										{{$timeFormat(item.last_modify_date || item.publish_date)}}
									</view>
								</view>
							</view>
						</view>
						<view class="mt-20" @click="$NavigateTo(`/pages/detail/articleDetail?id=${item._id}`)">
							<view class="fs-28 text-element-4">
								{{item.title}}
							</view>
							<image v-if="item.thumbnail.length == 1" class="br-20 mt-20 image-280"
								:src="item.thumbnail[0]" mode="aspectFill">
							</image>
							<view v-else-if="item.thumbnail.length == 2" class="flex-dir-row flex-x-bet">
								<image v-for="(url,its) in item.thumbnail"
									:class="its == 0?'brtl-20 brbl-20':'brtr-20 brbr-20'" :key="its"
									class="mt-20 image-3125" :src="url" mode="aspectFill">
								</image>
							</view>
							<view v-else-if="item.thumbnail.length >= 3" class="flex-dir-row flex-x-bet">
								<image v-for="(url,its) in item.thumbnail.slice(0,3)"
									:class="its == 0?'brtl-20 brbl-20':its == 1?'':'brtr-20 brbr-20'" :key="its"
									class="mt-20 image-205" :src="url" mode="aspectFill">
								</image>
							</view>
						</view>
						<view>
							<view class="flex-x-bet ali-item-cen flex-dir-row mt-20">
								<view>
									<view v-if="item.activity_id"
										@click="$NavigateTo(`../detail/detail?id=${item.activity_id}`)"
										class="br-200 flex-dir-row ali-item-cen border-bf padding-5-15">
										<image class="image-28" :src="item.activity_img[0].src" mode="aspectFill">
										</image>
										<view class="fs-26 ml-10 text-element-1">{{item.activity_name}}
										</view>
									</view>
								</view>
								<view class="flex-dir-row ali-item-cen col-87">
									<view class="flex-dir-row ali-item-cen">
										<view class="iconfont ic-talk-line fs-46"></view>
										<view class="fs-28 ml-5">{{item.comment_count || 0}}</view>
									</view>
									<view @click="likeCircle(item._id)" class="flex-dir-row ali-item-cen ml-20">
										<view class="iconfont fs-46 "
											:class="item.like_user_id.includes(userInfo.id)?'ic-nice col-00ba31':'ic-nice-line col-87'">
										</view>
										<view class="fs-28 ml-5">{{item.like_user_id.length || 0}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部logo -->
			<qmy-logo :loading="loading"></qmy-logo>
		</view>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/utils/store.js'

	export default {
		data() {
			return {
				topicId: 'topic001',
				topicInfo: {
					_id: 'topic001',
					name: '户外探险',
					description: '热爱户外运动的朋友们聚集在这里，分享徒步、登山、露营等各种户外活动的经验和心得。无论你是户外新手还是资深驴友，都能在这里找到志同道合的伙伴，一起探索大自然的美丽与神秘。',
					icon: 'https://picsum.photos/200/200?random=50',
					cover_image: 'https://picsum.photos/800/600?random=51',
					post_count: 1286,
					follow_count: 8520,
					rules: '1. 发布内容必须与户外运动相关\n2. 禁止发布危险或违法的户外活动信息\n3. 分享经验时请注意安全提醒\n4. 尊重自然环境，提倡环保理念\n5. 禁止商业广告和无关内容\n6. 保持友善交流，互相帮助\n7. 发布活动信息请详细说明风险等级'
				},
				loading: false,
				isFollowed: false,
				page: 0,
				pageSize: 10,
				hasMore: true,
				dataLoaded: true,
				circleList: [
					{
						_id: 'circle001',
						title: '周末爬香山，有一起的吗？',
						user_name: '户外小王',
						user_gender: 1,
						user_avatar: 'https://picsum.photos/200/200?random=60',
						publish_date: Date.now() - 3600000,
						last_modify_date: Date.now() - 3600000,
						thumbnail: ['https://picsum.photos/400/300?random=61','https://picsum.photos/400/300?random=61','https://picsum.photos/400/300?random=63','https://picsum.photos/400/300?random=64'],
						comment_count: 12,
						like_user_id: ['user001', 'user002'],
						is_essence: true,
						activity_id: 'activity001',
						activity_name: '香山红叶节',
						activity_img: [{src: 'https://picsum.photos/100/100?random=62'}]
					},
					{
						_id: 'circle002',
						title: '分享一下上周末的徒步路线和心得',
						user_name: '山野行者',
						user_gender: 2,
						user_avatar: 'https://picsum.photos/200/200?random=63',
						publish_date: Date.now() - 7200000,
						last_modify_date: Date.now() - 7200000,
						thumbnail: [
							'https://picsum.photos/400/300?random=65',
							'https://picsum.photos/400/300?random=65',
							'https://picsum.photos/400/300?random=65',
							'https://picsum.photos/400/300?random=65',
						],
						comment_count: 8,
						like_user_id: ['user003', 'user004', 'user005'],
						is_essence: false
					},
					{
						_id: 'circle003',
						title: '新手求教：第一次野外露营需要准备什么装备？',
						user_name: '户外新人',
						user_gender: 1,
						user_avatar: 'https://picsum.photos/200/200?random=66',
						publish_date: Date.now() - 10800000,
						last_modify_date: Date.now() - 10800000,
						thumbnail: [
							'https://picsum.photos/400/300?random=67',
							'https://picsum.photos/400/300?random=68',
							'https://picsum.photos/400/300?random=69'
						],
						comment_count: 25,
						like_user_id: ['user001', 'user006', 'user007', 'user008'],
						is_essence: false
					},
					{
						_id: 'circle004',
						title: '雨季登山安全指南，大家一定要注意！',
						user_name: '安全第一',
						user_gender: 2,
						user_avatar: 'https://picsum.photos/200/200?random=70',
						publish_date: Date.now() - 14400000,
						last_modify_date: Date.now() - 14400000,
						thumbnail: ['https://picsum.photos/400/300?random=71'],
						comment_count: 18,
						like_user_id: ['user002', 'user009', 'user010'],
						is_essence: true
					},
					{
						_id: 'circle005',
						title: '推荐几个适合初学者的徒步路线',
						user_name: '徒步达人',
						user_gender: 1,
						user_avatar: 'https://picsum.photos/200/200?random=72',
						publish_date: Date.now() - 18000000,
						last_modify_date: Date.now() - 18000000,
						thumbnail: [],
						comment_count: 6,
						like_user_id: ['user011'],
						is_essence: false
					}
				],
				isDescriptionExpanded: false,
				isRulesExpanded: false,
				rulesContentHeight: 0,
				descriptionHeight: 0,
				baseHeaderHeight: 380, // 基础头部高度
				isFirstLoad: true, // 首次加载标记
				contentMarginTop: 0,
				descriptionDefaultHeight: 0,
				descriptionAnimating: false,
				navbarBacColor: "0" // 导航栏背景色状态
			}
		},
		computed: {
			userInfo() {
				// 返回写死的用户信息用于测试
				return {
					id: 'current_user',
					name: '测试用户',
					avatar: 'https://picsum.photos/200/200?random=100'
				}
				// return store.userInfo // 用户信息
			},
			calculateHeaderHeight() {
				// 计算头部高度
				let height = this.baseHeaderHeight;

				// 如果描述展开，增加高度
				if (this.isDescriptionExpanded && this.topicInfo.description) {
					height += this.descriptionHeight;
				}

				// 如果规则展开，增加高度
				if (this.isRulesExpanded && this.topicInfo.rules) {
					height += this.rulesContentHeight;
				}

				return height;
			}
		},
		onLoad(options) {
			this.topicId = options.id || 'topic001';
			// 使用写死的数据，注释掉API调用
			// this.loadTopicDetail();
			// this.loadTopicCircles();
			// this.checkIfFollowed();
		},
		mounted() {
			// 初始化后监听系统字体大小变化
			uni.onWindowResize(() => {
				this.updateContentHeights();
			});
			
			// 模拟数据加载完成后的高度计算
			this.$nextTick(() => {
				this.updateContentHeights();
				this.isFirstLoad = false;
			});
		},
		onPullDownRefresh() {
			// 模拟刷新
			setTimeout(() => {
				uni.stopPullDownRefresh();
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				});
			}, 1000);
		},
		onReachBottom() {
			if (this.hasMore && !this.loading) {
				// 模拟加载更多
				this.loading = true;
				setTimeout(() => {
					this.loading = false;
					this.hasMore = false; // 模拟没有更多数据
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					});
				}, 1000);
			}
		},
		onPageScroll(e) {
			// 设置滚动阈值，超过该值则改变导航栏背景
			const scrollThreshold = 200;

			// 根据滚动位置更新导航栏背景色
			if (e.scrollTop > scrollThreshold && this.navbarBacColor === "0") {
				this.navbarBacColor = "8";
			} else if (e.scrollTop <= scrollThreshold && this.navbarBacColor === "8") {
				this.navbarBacColor = "0";
			}
		},
		methods: {
			// 加载话题详情（已使用写死数据）
			loadTopicDetail() {
				// 使用写死的数据，不需要API调用
				console.log('使用写死的话题数据');
			},

			// 检查是否已关注该话题（已使用写死数据）
			checkIfFollowed() {
				// 使用写死的数据，不需要API调用
				console.log('使用写死的关注状态');
			},

			// 关注/取消关注话题
			followTopic() {
				// 震动反馈
				uni.vibrateShort();

				// 先更新UI状态，防止重复点击
				this.isFollowed = !this.isFollowed;

				// 话题关注量本地更新
				if (this.isFollowed) {
					this.topicInfo.follow_count = (this.topicInfo.follow_count || 0) + 1;
					uni.showToast({
						title: '关注成功',
						icon: 'success'
					});
				} else {
					this.topicInfo.follow_count = Math.max(0, (this.topicInfo.follow_count || 0) - 1);
					uni.showToast({
						title: '取消关注',
						icon: 'success'
					});
				}
			},

			// 加载话题下的圈子（已使用写死数据）
			loadTopicCircles() {
				// 使用写死的数据，不需要API调用
				console.log('使用写死的圈子数据');
			},

			// 加载更多圈子（已在onReachBottom中处理）
			loadMoreCircles() {
				// 使用写死的数据，不需要API调用
				console.log('使用写死的数据，无更多圈子');
			},

			// 点赞/取消点赞圈子
			likeCircle(id) {
				// 防抖处理
				this.$debounce(() => {
					// 震动反馈
					uni.vibrateShort();

					// 查找圈子并更新点赞状态
					this.circleList.forEach(item => {
						if (item._id === id) {
							if (item.like_user_id.includes(this.userInfo.id)) {
								const index = item.like_user_id.indexOf(this.userInfo.id);
								item.like_user_id.splice(index, 1);
							} else {
								item.like_user_id.push(this.userInfo.id);
							}
						}
					});
				}, 500, true, "likeCircle");
			},

			// 刷新页面
			refresh() {
				// 模拟刷新
				this.dataLoaded = false;
				setTimeout(() => {
					this.dataLoaded = true;
				}, 500);
			},

			// 更精确计算内容高度
			updateContentHeights() {
				setTimeout(() => {
					// 计算描述内容最大可能高度（如果展开时）
					if (this.topicInfo.description) {
						uni.createSelectorQuery()
							.select(".topic-description")
							.boundingClientRect((data) => {
								if (this.descriptionDefaultHeight == 0) {
									this.descriptionDefaultHeight = data.height || 0;
								}
								if (data && this.descriptionDefaultHeight > 0) {
									this.descriptionHeight = data.height - this.descriptionDefaultHeight || 0;
								}
							})
							.exec();
					}

					// 计算规则内容高度
					this.calculateRulesHeight();
				}, 300);
			},

			// 切换话题描述展开/收起状态
			toggleDescription() {
				// 防止频繁点击
				if (this.descriptionAnimating) return;

				// 震动反馈
				uni.vibrateShort();

				// 标记动画进行中
				this.descriptionAnimating = true;

				if (!this.isDescriptionExpanded) {
					// 先切换状态
					this.isDescriptionExpanded = true;

					// 在状态变化后的下一个渲染周期重新计算高度
					this.$nextTick(() => {
						setTimeout(() => {
							// 重置动画状态
							this.descriptionAnimating = false;
						}, 500); // 等待动画完成
					});
				} else {
					// 收起操作
					this.isDescriptionExpanded = false;

					// 重置动画状态
					setTimeout(() => {
						this.descriptionAnimating = false;
					}, 500);
				}
			},

			// 切换话题规则展开/收起状态
			toggleRules() {
				// 震动反馈
				uni.vibrateShort();
				this.isRulesExpanded = !this.isRulesExpanded;

				// 自动设置content-wrapper类的高度 - CSS会自动处理
				// 不需要手动设置DOM元素高度
			},

			// 计算规则内容的高度
			calculateRulesHeight() {
				if (!this.topicInfo.rules) return;

				// 使用更精确的方法计算规则文本高度
				try {
					uni.createSelectorQuery()
						.select(".topic-rules-content")
						.boundingClientRect((data) => {
							if (data) {
								// 保存内容高度用于计算头部区域的总高度
								this.rulesContentHeight = this.isRulesExpanded ? data.height || 0 : 0;
							}
						})
						.exec();
				} catch (e) {
					console.error('计算规则高度错误:', e);
				}
			}
		},
		watch: {
			// 监听话题规则，当规则内容变化时重新计算高度
			'topicInfo.rules': {
				handler(newVal) {
					if (newVal && !this.isFirstLoad) {
						this.$nextTick(() => {
							this.updateContentHeights();
						});
					}
				}
			},
			// 监听展开/收起状态
			isRulesExpanded(newVal) {
				if (!this.isFirstLoad) {
					this.$nextTick(() => {
						this.calculateRulesHeight();
					});
				}
			},
			isDescriptionExpanded(newVal) {
				if (!this.isFirstLoad) {
					this.$nextTick(() => {
						this.updateContentHeights();
					});
				}
			}
		}
	}
</script>

<style>
	.topic-detail-page {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	/* 话题头部样式 */
	.topic-header {
		position: relative;
		width: 100%;
		/* 高度通过js动态计算 */
		min-height: 520rpx;
		/* 确保有最小高度 */
		height: 520rpx;
		/* 默认高度 */
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		color: #fff;
		overflow: hidden;
		transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
		z-index: 1;
	}

	.topic-header-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
		z-index: 1;
	}

	.topic-header-content {
		position: relative;
		z-index: 2;
		padding: 180rpx 30rpx 30rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.topic-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.topic-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.3);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
		margin-right: 20rpx;
		background-color: #fff;
	}

	.topic-info-details {
		flex: 1;
	}

	.topic-name {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	}

	.topic-stats {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		display: flex;
		align-items: center;
	}

	/* 话题描述样式修改 */
	.topic-description-container {
		position: relative;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.topic-description {
		font-size: 28rpx;
		line-height: 1.5;
		color: rgba(255, 255, 255, 0.9);
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		max-height: 84rpx;
		/* 限制为3行的近似高度 */
		overflow: hidden;
		transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.topic-description-expanded {
		max-height: 1000rpx;
		/* 设置足够大的值以适应内容 */
	}

	.topic-description-toggle {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		padding: 10rpx 0;
		cursor: pointer;
	}

	.topic-description-toggle .iconfont {
		font-size: 24rpx;
		margin-left: 8rpx;
		transition: transform 0.3s ease;
	}

	/* 话题规则样式 */
	.topic-rules {
		background: rgba(255, 255, 255, 0.12);
		border-radius: 20rpx;
		margin: 24rpx 0 30rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
		border: 1rpx solid rgba(255, 255, 255, 0.25);
		backdrop-filter: blur(10rpx);
		-webkit-backdrop-filter: blur(10rpx);
		transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	}

	.topic-rules-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 26rpx 30rpx;
		cursor: pointer;
		transition: all 0.3s ease;
		position: relative;
	}

	.topic-rules-title {
		font-size: 32rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		color: #ffffff;
	}

	.title-indicator {
		width: 8rpx;
		height: 32rpx;
		background: linear-gradient(to bottom, #14cc60, #0f9e4a);
		margin-right: 16rpx;
		border-radius: 4rpx;
	}

	.toggle-icon {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.15);
		border-radius: 50%;
		transition: all 0.3s ease;
	}

	.toggle-icon-expanded {
		background-color: rgba(255, 255, 255, 0.25);
	}

	.toggle-icon:active {
		transform: scale(0.9);
	}

	.toggle-icon .iconfont {
		font-size: 28rpx;
		color: #ffffff;
		transition: transform 0.3s ease;
	}

	.icon-rotate {
		transform: rotate(180deg);
	}

	.topic-rules-content-wrapper {
		height: 0;
		overflow: hidden;
		transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
		border-top: 1rpx solid rgba(255, 255, 255, 0.1);
	}

	.content-expanded {
		height: 290rpx !important;
	}

	.topic-rules-content {
		padding: 20rpx 30rpx 30rpx;
		font-size: 28rpx;
		line-height: 1.8;
		color: rgba(255, 255, 255, 0.95);
		height: 290rpx;
		transform: translateY(0);
		transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
	}

	/* 自定义滚动条样式 */
	.topic-rules-content::-webkit-scrollbar {
		width: 6rpx;
	}

	.topic-rules-content::-webkit-scrollbar-track {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 3rpx;
	}

	.topic-rules-content::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, 0.3);
		border-radius: 3rpx;
	}

	.topic-rules-text {
		white-space: pre-wrap;
		word-break: break-word;
		text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.25);
		letter-spacing: 1rpx;
	}

	.topic-rules-content>>>rich-text {
		display: none;
	}

	/* 关注按钮重新定位 */
	.topic-action {
		margin-left: 20rpx;
	}

	.topic-follow-btn {
		background-color: #14cc60;
		color: #fff;
		font-size: 26rpx;
		border-radius: 40rpx;
		padding: 6rpx 30rpx;
		border: none;
		line-height: 1.6;
		box-shadow: 0 4rpx 12rpx rgba(20, 204, 96, 0.3);
		transition: all 0.3s ease;
		min-width: 140rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.topic-follow-btn::after {
		border: none;
	}

	.topic-followed-btn {
		background-color: rgba(255, 255, 255, 0.2);
		color: #fff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.topic-follow-btn:active {
		transform: scale(0.95);
		opacity: 0.9;
	}

	/* 内容区域样式 */
	.topic-content {
		padding: 30rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
		position: relative;
		z-index: 20;
		border-radius: 30rpx 30rpx 0 0;
		box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.05);
		transform: translateZ(0);
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 0;
	}

	.empty-image {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 30rpx;
		opacity: 0.7;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	/* 底部没有更多数据 */
	.no-more {
		text-align: center;
		font-size: 24rpx;
		color: #999;
		padding: 30rpx 0;
	}

	.image-280 {
		height: 280rpx;
		max-width: 100%;
	}

	.image-205 {
		height: 205rpx;
		width: 205rpx;
	}

	.image-28 {
		width: 28rpx;
		height: 28rpx;
		border-radius: 5rpx;
	}

	.image-3125 {
		height: 260rpx;
		width: 312rpx;
	}

	.padding-5-15 {
		padding: 5rpx 15rpx;
	}
</style>
